<template>
  <div id="map" style="width: 100%; height: 100px;" />
</template>

<script>
let map
export default {
  name: 'BaiduMap',
  directives: {
  },
  created() {

  },
  mounted() {
    this.createMap()
  },
  methods: {
    createMap() {
      const el = document.getElementById('map')
      const height = window.innerHeight - el.getBoundingClientRect().top - 10
      el.style.height = `${height}px`

      try {
        map = new BMap.Map('map', {
          coordsType: 3,
          mapType: BMAP_HYBRID_MAP
        })
        const point = this.createPoint(this.$appConfig.mapConfig.lat, this.$appConfig.mapConfig.lng)
        map.centerAndZoom(point, 18)
        map.enableScrollWheelZoom()
        map.disableDoubleClickZoom()
        map.setMapStyleV2({
          styleId: '747aab9ee804b70d5f105acc0ac7c443'
        })

        this.$emit('mapCreate', true)
      } catch (e) {
        console.log(e)
        this.$emit('mapCreate', false)
      }
    },
    createPoint(lat, lng) {
      return new BMap.Point(lng, lat)
    }
  }
}
</script>

<style scoped>

</style>
